<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <script src="./element-ui/lib/index.js"></script>

    <link rel="stylesheet" href="./css/normalize.css">

    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/global.css">

    <script src="./js/axios.js"></script>

</head>

<body>
<input type="hidden" id="userId" value="<%=session.getAttribute("userId")%>">

    <div id="app" v-infinite-scroll="load" style="height:100vh; overflow-x: auto;">
        <el-container>
            <el-header direction="vertical">
                <el-container>
                    <div>
                        <el-tabs v-model="menu1" @tab-click="handleClick">
                            <el-tab-pane label="首页" name="first"></el-tab-pane>
                            <el-tab-pane label="首页"></el-tab-pane>
                            <el-tab-pane label="首页"></el-tab-pane>
                            <el-tab-pane label="首页"></el-tab-pane>
                            <el-tab-pane label="首页"></el-tab-pane>
                            <el-tab-pane label="首页"></el-tab-pane>
                            <el-tab-pane label="首页"></el-tab-pane>
                            <el-tab-pane label="首页"></el-tab-pane>
                            <el-tab-pane label="首页"></el-tab-pane>
                            <el-tab-pane label="首页"></el-tab-pane>
                        </el-tabs>
                    </div>
                    <div>
                        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                    <div>
                        <el-dropdown split-button type="primary">
                            发布文章
                            <el-dropdown-menu>
                                <el-dropdown-item icon="el-icon-document">草稿箱</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div v-if="{login:false}">
                        <el-dropdown>
                            <i class=" el-icon-message-solid" style="font-size:30px;"></i>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>评论</el-dropdown-item>
                                <el-dropdown-item>赞和收藏</el-dropdown-item>
                                <el-dropdown-item>新增粉丝</el-dropdown-item>
                                <el-dropdown-item>私信</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div v-if="{login:false}">
                        <div><el-avatar :size="40" :src="circleUrl"></el-avatar></div>
                    </div>
                </el-container>
                <el-container>
                    <el-tabs type="border-card" style="width:100% ;">
                        <el-tab-pane label="新增评论">
                            <div v-for="item in comments">
                                <el-row>
                                    <el-col :span="1">
                                        <el-avatar :size="40" :src="circleUrl"></el-avatar>
                                    </el-col>
                                    <el-col :span="23">
                                        <div>
                                            <el-link href="" target="">
                                                {{item.user.userName}}
                                            </el-link>
                                            <span>
                                                评论了你的文章
                                            </span>
                                        </div>
                                        <div>
                                            <span>
                                                {{item.commentContent}}
                                            </span>
                                        </div>
                                        <div>
                                            <el-divider direction="vertical"></el-divider>
                                            <el-link href="" target="_blanck">
                                                {{item.article.articleTitle}}
                                            </el-link>
                                        </div>
                                        <div>
                                            <span>
                                                {{item.commentDate}}
                                            </span>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-divider direction="horizontal"></el-divider>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="新增赞">
                            <div v-for="item in likes">
                                <el-row>
                                    <el-col :span="1">
                                        <el-avatar :size="40" :src="circleUrl"></el-avatar>
                                    </el-col>
                                    <el-col :span="23">
                                        <div>
                                            <el-link href="">{{item.user.userName}}</el-link>
                                            <span>赞了你的文章</span>
                                        </div>
                                        <div>
                                            <el-divider direction="vertical"></el-divider>
                                            <el-link href="">{{item.article.articleTitle}}</el-link>
                                        </div>
                                        <div>
                                            {{item.likeDate}}
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-divider diection="horizontal"></el-divider>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="新增粉丝">
                            <div v-for="item in subscribes">
                                <el-row>
                                    <el-col :span="1">
                                        <el-avatar :size="40" :src="circleUrl"></el-avatar>

                                    </el-col>
                                    <el-col :span="22">
                                        <div>
                                            <el-link href="" target="_blank">
                                                {{item.subsriber.userName}}
                                            </el-link>
                                            <span>关注了你</span>
                                        </div>
                                        <div>
                                            <span>
                                                {{item.subsribeDate}}
                                            </span>
                                        </div>
                                    </el-col>
                                    <el-col :span="1">
                                        <el-button @click="subscribeSomeone(item.subsriber.userId)">关注</el-button>
                                    </el-col>
                                </el-row>
                                <el-divider direction="horizontal"></el-divider>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="私信">
                            <el-container>
                                <el-aside width="">
                                    <div>
                                        <el-input v-model="a" placeholder="搜索联系人，Enter搜索"></el-input>
                                    </div>
                                    <div>
                                        <el-divider direction="horizontal"></el-divider>
                                    </div>
                                    <div style="height:70vh; overflow-y: auto; overflow-x: hidden;" id="scrollDiv">
                                        <div v-for="item in chats" @click="openChat(item.chatId,item.user1.userName)">
                                            <div style="display: flex;">
                                                <div>
                                                    <el-avatar :size="40" :src="circleUrl"></el-avatar>
                                                </div>
                                                <div>
                                                    <div style="display: flex; justify-content: space-between;">
                                                        <span>
                                                            {{item.user1.userName}}
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div>
                                                <el-divider direction="horizontal"></el-divider>
                                            </div>
                                        </div>
                                    </div>
                                </el-aside>
                                <el-main direction="vertical" style="height: 80vh; overflow-y: hidden;">
                                    <div style="height: 5%;">
                                        <span>{{userName}}</span>
                                    </div>
                                    <div>
                                        <el-divider direction="horizontal"></el-divider>
                                    </div>
                                    <div style="height: 70%; overflow-y: auto; overflow-x: hidden;">
                                        <div v-for="item in currentChatRecord">
                                            <div v-if="item.userId==userId">
                                                <div style="text-align: center;"><span>{{item.chatRecordDate}}</span></div>
                                                <div style="display: flex; align-items: center;justify-content: end; ">
                                                    <div style="width: 50%; display: flex; justify-content: end;">
                                                        <div style="background-color: aqua; ">
                                                            {{item.chatRecordContent}}
                                                        </div>
                                                        <div>
                                                            <el-avatar :size="40" :src="circleUrl"></el-avatar>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                            <div v-if="item.userId!=userId">
                                                <div style="text-align: center;"><span>{{item.chatRecordDate}}</span></div>
                                                <div
                                                    style="display: flex; align-items: center;justify-content: start; ">
                                                    <div style="width: 50%; display: flex;">
                                                        <div>
                                                            <el-avatar :size="40" :src="circleUrl"></el-avatar>
                                                        </div>
                                                        <div style="background-color: aqua;">
                                                            {{item.chatRecordContent}}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="height: 25%;">
                                        <el-divider direction="horizontal"></el-divider>
                                        <el-input rows="3" v-model="chat.chatRecordContent" placeholder="按Enter发送消息"
                                            type="textarea" @keyup.enter.native="sendMessage"></el-input>
                                    </div>
                                </el-main>
                            </el-container>
                        </el-tab-pane>
                    </el-tabs>
                </el-container>
            </el-header>
            <el-main>
                <el-container>

                </el-container>
            </el-main>
        </el-container>
    </div>

</body>

<script src="./js/notice.js"></script>

</html>